<template>
  <div class="commom-card">
    <CommonCard title="累计用户数" value="1,087,503">
      <template>
        <div
          id="total-users-chart"
          :style="{ width: '100%', height: '100%' }"
        ></div>
      </template>
      <template v-slot:footer>
        <div class="total-users-footer">
          <div class="compare">
            <span>日同比</span>
            <span class="emphasis">8.73%</span>
            <div class="increase"></div>
          </div>
          <div class="compare">
            <span class="month">月同比</span>
            <span class="emphasis">38.79%</span>
            <div class="decrease"></div>
          </div>
        </div>
      </template>
    </CommonCard>
  </div>
</template>
<script>
import commomCardMixin from "../../mixins/commomCardMixin";
export default {
  mixins: [commomCardMixin],
  mounted() {
    const chartDom = document.getElementById("total-users-chart");
    //init(DOM元素，样式，渲染模式（svg）)
    const chart = this.$echarts.init(chartDom, { rederer: "svg" });
    chart.setOption({
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
      },
      xAxis: {
        type: "value",
        show: false,
      },
      yAxis: {
        type: "category",
        show: false,
      },
      series: [
        {
          type: "bar",
          stack: "总量",
          data: [200],
          barWidth: 10,
          itemStyle: {
            color: "#45c946",
          },
        },
        {
          type: "bar",
          stack: "总量",
          data: [250],
          itemStyle: {
            color: "#eee",
          },
        },
        {
          //绘制自定义图形
          type: "custom",
          stack: "总量",
          data: [200],
          renderItem(params, api) {
            const value = api.value(0);
            const endPoint = api.coord([value, 0]);
            return {
              type: "group",
              position: endPoint,
              children: [
                {
                  type: "path",
                  shape: {
                    d: "M512 682.666667l298.666667-298.666667H213.333333z",
                    x: -5,
                    y: -20,
                    width: 10,
                    height: 10,
                    //layout 用于指定缩放策略。
                    layout:'cover'
                  },
                  style: {
                    fill: "#45c946",
                  },
                },
                {
                  type: "path",
                  shape: {
                    d: "M512 341.333333l-298.666667 298.666667h597.333334z",
                    x: -5,
                    y: 10,
                    width: 10,
                    height: 10,
                    layout:'cover'
                  },
                  style: {
                    fill: "#45c946",
                  },
                },
              ],
            };
          },
        },
      ],
    });
  },
};
</script>
<style scoped lang="scss">
.total-users-footer {
  display: flex;
  align-items: center;
  .month {
    margin-left: 10px;
  }
  .compare {
    display: flex;
    align-items: center;
    height: 50%;
    font-size: 12px;
    margin-top: 3px;
    color: #666;
    .increase {
      width: 0;
      height: 0;
      border-width: 3px;
      border-color: transparent transparent red transparent;
      border-style: solid;
      margin: 0 0 3px 5px;
    }
    .decrease {
      width: 0;
      height: 0;
      border-width: 3px;
      border-color: green transparent transparent transparent;
      border-style: solid;
      margin: 3px 0 0 5px;
    }
  }
}
</style>